<template>
	<view>
		<uni-popup ref="vipcon" zindex type="center" @maskClick="maskClick" :safeArea="false">
			<view class="comBotBxs" @touchmove.stop.prevent="">
				<view class="tips_type">提示</view>
				<view class="tips_content">亲，您还未点主食哦！</view>
				<!-- <view class="tips_contents">是否去添加主食？</view> -->
				<view class="foot_btns">
					<view class="coomBtns unNeed margin-right" @click="backAction(false)">我不需要</view>
					<view class="coomBtns toAdds" @click="backAction(true)">去点</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref, defineEmits } from 'vue';
	const emit = defineEmits(["maskClick","backActs"])
	const vipcon = ref()
	const list = ref([])
	const loaded = ref(false)
	const open = async (v ?: any) => {
		vipcon.value.open()
	}
	const close = () => {
		vipcon.value.close()
	}

	const maskClick = (e : any) => {
		// console.log('car-maskClick',e);
		emit("maskClick")
	}
	const backAction=(flags:any)=>{
		uni.vibrateShort();
		emit("backActs",flags)
		// close()
	}
	defineExpose({ open, close })
</script>

<style lang="scss" scoped>
	.comBotBxs {
		width: 530rpx;
		height: 340rpx;
		border-radius: 36rpx;
		background: #FFF;
		padding: 20rpx 30rpx 20rpx 40rpx;

		.tips_type {
			text-align: center;
			color: #000;
			font-size: 36rpx;
			font-style: normal;
			font-weight: 700;
		}

		.tips_content {
			color: #333;
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0.6rpx;
			margin: 56rpx auto;
			text-align: center;
		}

		.tips_contents {
			color: #333;
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0.6rpx;
		}

		.foot_btns {
			display: flex;
			justify-content: center;
			width: 100%;
			height: 80rpx;
			position: absolute;
			bottom: 40rpx;
			left:0;
			.coomBtns {
				width: 204rpx;
				height: 100%;
				font-size: 32rpx;
				font-weight: 400;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.toAdds {
				border: 2rpx solid #5DB175;
				color: #fff;
				background-color: #5DB175;
			}

			.unNeed {
				background-color: #fff;
				color: #5DB175;
				border: 2rpx solid #5DB175;
			}
		}
	}
</style>